<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全日历demo</title>
    <link rel="stylesheet" href="../js/fullcalendar/fullcalendar.min.css">
    <link rel="stylesheet" href="../js/fullcalendar/fullcalendar.print.min.css" media="print">
    <script type="text/javascript" src="../js/moment.min.js"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="../js/fullcalendar/locale-all.js"></script>
    <script>

        $(document).ready(function() {

            $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,basicWeek,basicDay'
                },
                locale:'zh-cn',
                defaultDate: '2016-12-12',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                    {
                        title: 'All Day Event',
                        start: '2016-12-01'
                    },
                    {
                        title: 'Long Event',
                        start: '2016-12-07',
                        end: '2016-12-10'
                    }
                ]
            });

        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif,"宋体";
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>

<div id='calendar'></div>

</body>
</html>